<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="css/framework7.ios.css">
    <link rel="stylesheet" href="css/framework7.ios.colors.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar-overlay"></div>

<!-- Views-->
<div class="views">
    <!-- Your main view, should have "view-main" class-->
    <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner">
                <!-- We have home navbar without left link-->
                <div class="center sliding">功能演示</div>
            </div>
        </div>
        <div class="pages navbar-through toolbar-through">
            <div data-page="index" class="page">
                <div class="page-content">
                    <div class="list-block">
                        <ul>
                            <li>
                                <a href="pages/social.html" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">社交分享</div>
                                            <div class="item-after">Social</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="pages/qrcode.html" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">二维码</div>
                                            <div class="item-after">QRCode</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="pages/pay.html" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">支付</div>
                                            <div class="item-after">Alipay</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="pages/imagePicker.html" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">图片选择器</div>
                                            <div class="item-after">ImagePicker</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="pages/geolocation.html" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">位置管理</div>
                                            <div class="item-after"></div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="pages/video.html" class="item-link">
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">视频录制</div>
                                            <div class="item-after"></div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>


                    <div class="list-block">
                        <ul>
                            <li>
                                <a href="index.html" class="item-link" target="_blank">
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">新窗口打开</div>
                                            <div class="item-after">openWindow</div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="http://www.baidu.com/" class="item-link" target="_blank">
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">新窗口打开百度</div>
                                            <div class="item-after"></div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>


                    <div class="content-block">
                        <div class="content-block-title">主题设置</div>
                        <div class="list-block">
                            <ul>
                                <li>
                                    <label class="label-radio item-content">
                                        <input type="radio" name="color-radio" value="blue" checked>
                                        <div class="item-inner">
                                            <div class="item-title">Blue</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <label class="label-radio item-content">
                                        <input type="radio" name="color-radio" value="gray">
                                        <div class="item-inner">
                                            <div class="item-title">Gray</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <label class="label-radio item-content">
                                        <input type="radio" name="color-radio" value="black">
                                        <div class="item-inner">
                                            <div class="item-title">Black</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <label class="label-radio item-content">
                                        <input type="radio" name="color-radio" value="lightblue">
                                        <div class="item-inner">
                                            <div class="item-title">Light Blue</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <label class="label-radio item-content">
                                        <input type="radio" name="color-radio" value="yellow">
                                        <div class="item-inner">
                                            <div class="item-title">Yellow</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <label class="label-radio item-content">
                                        <input type="radio" name="color-radio" value="orange">
                                        <div class="item-inner">
                                            <div class="item-title">Orange</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <label class="label-radio item-content">
                                        <input type="radio" name="color-radio" value="pink">
                                        <div class="item-inner">
                                            <div class="item-title">Pink</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <label class="label-radio item-content">
                                        <input type="radio" name="color-radio" value="green">
                                        <div class="item-inner">
                                            <div class="item-title">Green</div>
                                        </div>
                                    </label>
                                </li>
                                <li>
                                    <label class="label-radio item-content">
                                        <input type="radio" name="color-radio" value="red">
                                        <div class="item-inner">
                                            <div class="item-title">Red</div>
                                        </div>
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

<!-- hybrid -->
<script type="text/javascript" src="js/hybrid.js"></script>
<script type="text/javascript" src="js/hybrid/utils.js"></script>
<script type="text/javascript" src="js/hybrid/core.js"></script>
<script type="text/javascript" src="js/hybrid/logger.js"></script>
<script type="text/javascript" src="js/hybrid/qrcode.js"></script>
<script type="text/javascript" src="js/hybrid/social.js"></script>
<script type="text/javascript" src="js/hybrid/alipay.js"></script>
<script type="text/javascript" src="js/hybrid/geolocation.js"></script>
<script type="text/javascript" src="js/hybrid/imagePicker.js"></script>
<script type="text/javascript" src="js/hybrid/file.js"></script>
<script type="text/javascript" src="js/hybrid/video.plugin.js"></script>
<!-- hybrid end -->

<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="js/framework7.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>